<template>
	<view>
		<view style="height: 35px;"></view>
		<uni-search-bar radius="10" />
		<uni-swiper-dot :info="shopInfo" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" autoplay interval="2000">
			    <swiper-item v-for="(item ,index) in shopInfo" :key="index" class="swItemBanner">
					<image :src="item.url" mode="scaleToFill" class="imgBanner"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 顶部导航 -->
		<view class="viewCommunity">
			<navigator :url="item.path" v-for="(item, index) in community" :key="index" class="viewCom" >
			<!-- <view@click="classify"> -->
				<image :src="item.url" mode="aspectFit"></image>
				<text>{{ item.content }}</text>
			<!-- </view> -->
			</navigator>
		</view>
		<view class="viewLine">
		</view>
		<view class="youhui">
			<image src="../../static/images/clipboard.png" mode=""></image>
		</view>
		<!-- 乐宠抢购 -->
		<view class="qiangGou">
			<view class="qgText">
				<view class="">
					<text>乐宠抢购</text>
					<!-- 时间 -->
					<uni-countdown :show-day="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
				</view>
				<text>每日8点更新</text>
			</view>
			<view class="qgShop">
				<view v-for="(item, index) in qiangGou" :key="index">
					<image :src="item.url" mode="aspectFit"></image>
					<text class="flex flex-direction">￥{{ item.newmoney }}</text>
					<text class="flex flex-direction" style="text-decoration: line-through;">￥{{ item.oldmoney }}</text>
				</view>
			</view>
		</view>
		<!-- 田字格 -->
		<view class="jxBox">
			<view class="jxuanOne" v-for="(items, index) in jingxuan" :key="index">
				<view class="jxWords">
					<text>{{ items.name }}</text>
					<text>{{ items.discount }}</text>
					<text> + GO > </text>
				</view>
				<image :src="items.url" mode="aspectFit"></image>
			</view>
		</view>
		<view class="viewLine">
		</view>
		<!-- 宠物星系 -->
		<view class="">
			<view class="animalBox">
				宠物星系
			</view>
			<view class="">
				<view class="specificAnm" v-for="(items, index) in animal" :key="index">
					<view class="">
						<!-- 汪星人 -->
						{{ items.name }}
					</view>
					<!-- 种类 -->
					<view class="">
						<view class="speAnimBox" v-for="(item, index) in items.type" :key="index">
							<view class="">
								<view class="">
									<text>{{ item.dogName }}</text>
									<text>{{ item.sketch }}</text>
								</view>
								<image :src="item.url" mode=""></image>
							</view>
							<view class="animPeriod" v-if="item.dogType != null">
								<view class="animalType" v-for="(item, index) in item.dogType">
									<text>{{ item.type }}</text>
									<text>{{ item.sketch }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	// 倒计时
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	export default {
		components:{
			// 搜索框
			uniSearchBar,
			// 轮播图
			uniSwiperDot,
			// 倒计时
			uniCountdown,
		},
		data() {
			return {
				// 轮播图
				shopInfo: this.$store.state.homeBanner,
				current: 0,
				mode: 'round',
				// 顶部导航
				community: [
					{
						id: 0,
						content: "主食",
						url: "../../static/images/navigation/one.png",
						path: ""
					},{
						id: 1,
						content: "零食",
						url: "../../static/images/navigation/two.png",
						path: ""
					},{
						id: 2,
						content: "洗护",
						url: "../../static/images/navigation/three.png",
						path: ""
					},{
						id: 3,
						content: "保健",
						url: "../../static/images/navigation/four.png",
						path: ""
					},{
						id: 4,
						content: "玩具",
						url: "../../static/images/navigation/five.png",
						path: ""
					},{
						id: 5,
						content: "团购",
						url: "../../static/images/navigation/six.png",
						path: ""
					},{
						id: 6,
						content: "优惠券",
						url: "../../static/images/navigation/seven.png",
						path: ""
					},{
						id: 7,
						content: "进口",
						url: "../../static/images/navigation/eight.png",
						path: ""
					},{
						id: 8,
						content: "积分",
						url: "../../static/images/navigation/nine.png",
						path: ""
					},{
						id: 9,
						content: "分类",
						url: "../../static/images/navigation/ten.png",
						path: "/pages/classify/classify"
					},
				],
				// 抢购
				qiangGou: [
					{
						id: 0,
						oldmoney: "198",
						newmoney: "98",
						url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=392137148,2720929874&fm=26&gp=0.jpg"
					},{
						id: 1,
						oldmoney: "159",
						newmoney: "115",
						url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
					},{
						id: 2,
						oldmoney: "249",
						newmoney: "140",
						url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4193207991,3788365245&fm=26&gp=0.jpg"
					},{
						id: 3,
						oldmoney: "38",
						newmoney: "22.5",
						url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1673558976,3511652085&fm=26&gp=0.jpg"
					}
				],
				hour: 9,
				minute: 27,
				second: 59,
				// 田字格精选
				jingxuan: [
					{
						id: 0,
						name: "主粮精选",
						discount: "满199减30",
						url: ""
					},{
						id: 1,
						name: "日用精选",
						discount: "满159减20",
						url: ""
					},{
						id: 2,
						name: "零食精选",
						discount: "满139减10",
						url: ""
					},{
						id: 3,
						name: "精品排行榜",
						discount: "更有低至3折",
						url: ""
					}
				],
				animal: [
					{
						name: "汪星人",
						type: [
							{
								dogName: "小型犬",
								sketch: "如吉娃娃/泰迪等",
								url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603456249113&di=163855a8469cc9da2eec8179383184b1&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2F00%2Fzu%2FQJ6543291920.jpg%3Fx-oss-process%3Dstyle%2Fshows",
								dogType: [
									{
										type: "离乳期",
										sketch: "轻松应对断奶"
									},
									{
										type: "幼犬期",
										sketch: "助力健康成长"
									}
								]
							},
							{
								dogName: "中大型犬",
								sketch: "如金毛/哈士奇等",
								url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603456315717&di=6aa25ba096c0adbf39ed5e18d85a9d33&imgtype=0&src=http%3A%2F%2Fsc.jb51.net%2Fuploads%2Fallimg%2F150714%2F14-150G4115032436.jpg",
								dogType: [
									{
										type: "成犬期",
										sketch: "好营养伴更久"
									},
									{
										type: "全犬期",
										sketch: "全犬种全犬期"
									}
								]
							}
						]
					},
					{
						name: "喵星人",
						type: [
							{
								dogName: "幼猫粮",
								sketch: "天然促发育",
								url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2962951500,1758092619&fm=26&gp=0.jpg",
								dogType: [
									{
										type: "成猫粮",
										sketch: "要营养讲科学"
									},
									{
										type: "全猫粮",
										sketch: "全猫期全猫种"
									}
								]
							}
						]
					},
				],
				
			}
		},
		onLoad: () => {
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			classify() {
				uni.navigateTo({
					url: ""
				})
			}
		}
	}
</script>

<style>
/* 轮播图 */
uni-swiper {
	height: 300rpx;
}
.swItemBanner > image {
	width: 718rpx;
	height: 300rpx;
}
.swiper-box {
	margin-left: 16rpx;
	margin-right: 16rpx;
}
/* 顶部导航 */
.viewCommunity {
	margin: 16rpx;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.viewCommunity > view {
	text-align: center;
}
.viewCommunity uni-image {
	width: 100rpx;
	height: 100rpx;
}
.viewCom {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.viewCom > text {
	font-size: 24rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.viewLine {
	width: 100%;
	height: 20rpx;
	background-color: #e8e8e8;
}
.youhui {
	padding: 16rpx;
	width: 717rpx;
	height: 220rpx;
}
.youhui > image {
	width: 100%;
	height: 220rpx;
}
/* 抢购 */
.qiangGou {
	background-color: #FDD400;
	color: #FFFFFF;
	margin: 16rpx;
	border-radius: 10rpx;
	padding-bottom: 1px;
}
.qgText {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.qgText > view {
	margin: 16rpx;
	display: flex;
}
.qgText > view > text:first-child {
	font-size: 40rpx;
} 
.qgText > text {
	margin-right: 16rpx;
}
.qgShop {
	margin: 16rpx;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.qgShop view {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
}
.qgShop text {
	width: 80rpx;
	text-align: center;
	border-radius: 500rpx;
	font-size: 24rpx;
}
.qgShop text:nth-of-type(1) {
	/* display: block; */
	background-color: #FED501;
}
.qgShop text:nth-of-type(2) {
	color: #cacaca;
}
.qgShop image {
	width: 170rpx;
	height: 220rpx;
}
/* 田字格 */
.jxBox {
	margin: 0 16rpx;
	margin-bottom: 22rpx;
	/* background-color: #4CD964; */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.jxuanOne {
	margin-top: 16rpx;
}
.jxuanOne {
	/* width: 352rpx; */
	width: 49%;
	height: 230rpx;
	position: relative;
	display: flex;
	flex-flow: row wrap;
}
.jxuanOne image {
	width: 100%;
	height: 230rpx;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 10rpx;
	/* border: #4CD964 2rpx solid; */
	background-color: #FED501;
}
.jxWords {
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #FFFFFF;
	position: absolute;
	top: 30rpx;
	left: 30rpx;
	/* margin-top: 20rpx;
	margin-left: 20rpx; */
}
.jxWords > text:nth-of-type(2) {
	font-size: 26rpx;
}
.jxWords > text:not(:nth-of-type(2)) {
	font-size: 40rpx;
}
.jxWords > text:nth-of-type(3) {
	padding-left: 10rpx;
	width: 150rpx;
	border: 2rpx solid #FFFFFF;
}
/* 宠物星系 */
.animalBox {
	font-size: 20px;
	line-height: 40px;
	height: 40px;
	padding-left: 8px;
	border-bottom: 1px solid #e8e8e8;
}
.specificAnm > view:first-child {
	height: 25px;
	line-height: 25px;
	padding-left: 8px;
	border-bottom: 1px solid #e8e8e8;
}
.specificAnm > view:nth-of-type(2) > view {
	display: flex;
	justify-content: space-between;
}
.speAnimBox > view:first-child {
	display: flex;
	justify-content: space-between;
	width: 50%;
	height: 90px;
	align-items: center;
	border-bottom: 1px solid #e8e8e8;
}
.speAnimBox image {
	width: 80px;
	height: 80px;
}
.speAnimBox > view:first-child > view:first-child {
	display: flex;
	flex-flow: column;
	padding-left: 8px;
}
.speAnimBox > view:first-child > view:first-child > text:nth-of-type(2) {
	font-size: 12px;
}
.animPeriod {
	align-items: center;
	width: 50%;
	border-bottom: 1px solid #e8e8e8;
	display: flex;
	justify-content: space-between;
	/* flex-flow: column wrap; */
}
.animNoPer {
	width: 0;
	height: 0;
}
.animalType {
	width: 50%;
	height: 90px;
	padding-left: 8px;
	/* margin-left: 10px; */
	display: flex;
	flex-flow: column;
	justify-content: center;
	border-left: 1px solid #e8e8e8;
}
.animalType > text:nth-of-type(2) {
	font-size: 12px;
}
</style>
